<template>
    <div id = "Gender">
        <div class="title">
            <i class="iconfont iconzuojiantou" @click="MyGender"></i>
            <span>更改性别</span>
            <i class="iconfont iconzuojiantou" style="color: rgba(0,0,0,0);"></i>
        </div>
        <div class="Gender-Box">
            <span :style="GenderMen" @click="getMen">{{Men}}</span>
            <span :style="GenderWomen" @click="getWomen">{{Women}}</span>
        </div>
        <button @click="Sex">确认</button>
    </div>
</template>
<script>
import {Toast} from 'vant';
export default {
    name:"MyPortrait",
    data() {
        return {
            Men:"男",
            Women:"女",
            GenderSex:"",
            UseryID:""
        }
    },
    created(){
        this.GenderSex = this.$route.query.PortraitSex;
        var list = JSON.parse(localStorage.getItem("key"));
        this.UseryID = list.userId;
    },
    mounted () {
         
    },
    computed:{
        GenderMen(){
            return this.GenderSex == "0" ? {color:"green"}:{};
        },
        GenderWomen(){
            return this.GenderSex == "1" ? {color:"green"}:{};
        }
    },
    methods: {
        MyGender(){
            this.$router.push("/MyPortrait");
        },
        getMen(){
            this.GenderSex = "0";
            localStorage.setItem("sexType",this.GenderSex)
        },
        getWomen(){
             this.GenderSex = "1";
              localStorage.setItem("sexType",this.GenderSex)
        },
        Sex(){
            this.$axios.post("/system/user/profile/update", {
                sex:this.GenderSex
            })
            .then(res => {
                Toast(res.data.msg)
                console.log(res);
                this.$router.push("/MyPortrait");
            });
        },  
    }, 
}
</script>
<style lang="less" scoped>
#Gender{
    width: 100%;
    height: 100%;
    background: rgb(248, 248, 248);
    .title{
        width: 100%;
        font-size: 0.36rem;
        color:#333333;
        height: 1.25rem;
        line-height: 1.25rem;
        display: flex;
        justify-content: space-between;
        padding: 0 0.2rem;
        box-sizing: border-box;
        background: #FFFFFF
    }
    .Gender-Box{
        width: 100%;
        height: 1.54rem;
        margin-top: .12rem;
        background: white;
        span:nth-child(1){
           border-bottom: .02rem solid rgb(206, 206, 206);
        }
        span{
            display: block;
            width: 6.9rem;
            height: 0.78rem;
            font-size: 0.28rem;
            margin-left: 0.3rem;
            line-height: 0.78rem;
            color: #666666;
       }     
    }
    button{
        width: 6.9rem;
        height: 1rem;
        font-size: 0.32rem;
        background: #38A83F;
        color: white;
        border-radius: 0.2rem;
        margin: 2.59rem 0.3rem;
    }
}
</style>